<template>
  <div>
      <a-input ref="inputRef"  @focus="handleFocus" readonly="true" v-model="vehicleTypeName" :placeholder="$t('pleaseSelectType')" style="width: 100%" />
      <a-modal width="69.9%" v-model="visible" :title="$t('selectType')" @cancel="handleCancel" @ok="handleOk">
          <div class="modal-content__wrap">
              <div class="modal-content">
                  <EBikeTypeCard :id.sync="selectedId" @change="handleChange" :value="item" :key="item.id" v-for="(item, index) in listData"></EBikeTypeCard>
              </div>
              <div class="model-bottom">
                  <a-pagination @change="handlePageChange" :pageSize.sync="queryPage.pageSize" v-model="queryPage.pageNo" :total="queryPage.total" show-less-items />
              </div>
          </div>
      </a-modal>
  </div>
</template>


<i18n>
{
  "zh-CN": {
    "selectType":"选择车辆类型",
    "pleaseSelectType":"请选择车辆类型"
  },
  "en-US": {
    "selectType":"Select vehicle type",
    "pleaseSelectType":"Please select the vehicle type"
  },
  "fr-FR": {
    "selectType":"Choisir le type de véhicule",
    "pleaseSelectType":"Veuillez sélectionner un type de véhicule"
  }
}
</i18n>

<script>
import EBikeTypeCard from '../card/EBikeTypeCard.vue'
import { getAction } from '@/api/manage'
const listUrl = "/rental/ebike-type/list"; // 模块级别的常量  
export default {
  components:{
    EBikeTypeCard
  },
  props:{
      value:{
          type: String,
          default: ""
      },
      id:{
          type: String,
          default: ""
      }
  },
  data(){
      return {
          vehicleTypeName: "",
          visible: false,
          queryPage:{
              pageNo: 1,
              pageSize: 6,
              total: 0
          },
          listData:[],
          selectedData:{},
          selectedId: '',
      }
  },
  watch:{
      value:{
          handler(newVal){
              this.vehicleTypeName = newVal;
              this.list();
          },
          deep: true,
          immediate: true
      }
  },
  mounted(){

  },
  methods:{
      list(){
          let params = {};
          getAction(listUrl, Object.assign(params, this.queryPage)).then((res) => {
              if (res.success) {
                  this.listData = res.result.records;
                  this.queryPage.pageNo = res.result.current;
                  this.queryPage.pageSize = res.result.size;
                  this.queryPage.total = res.result.total;
              }else{
                  this.$message.warning(res.message)
              }
          })
      },
      handleFocus(){
          this.visible = true;
          this.$refs.inputRef.blur();
      },
      handleOk(){
          this.$emit("input", this.selectedData.carTypeName);
          this.$emit("update:id", this.selectedData.id);
          this.visible = false;
      },
      handleCancel(){
          this.visible = false;
      },
      handlePageChange(page, pageSize){
          this.queryPage.pageNo = page;
          this.list();
      },
      handleChange(item){
          this.selectedData = item;
      }
  }
}
</script>

<style lang="less" scoped>
.modal-content__wrap{
  .modal-content{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
  }
  .model-bottom{
      display: flex;
      flex-direction: row;
      justify-content: center;
  }
}

</style>